<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>
<body>
    <h2>用户登录</h2>
    <form id="loginForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" maxlength="20">
        <br><br>
        <label for="password">密码：</label>
        <input type="password" id="password" maxlength="20">
        <br><br>
        <button type="button" id="clearButton">清空</button>
        <button type="submit" id="loginButton">登录</button>
    </form>
    <script>
        document.getElementById('clearButton').addEventListener('click', () => {
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
            alert('内容已清空');
        });
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();
            if (!username || !password) {
                alert('用户名和密码不能为空！');
                return;
            }
            if (username.length > 20 || password.length > 20) {
                alert('用户名和密码长度不能超过 20 个字符！');
                return;
            }
            const response = await fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username,
                    password
                })
            });
            const result = await response.json();
            if (result.success) {
                window.location.href = '/success.html?timestamp=' + Date.now();
            } else {
                alert('用户名或者密码不正确');
            }
        });
    </script>
</body>

</html>